<template>
  <Modal
    :options="getModalOptions"
    :on-positive-click="handleConfirm"
    :on-negative-click="handleClose"
    :on-close="handleClose"
  >
    <template #Context>
      <n-form
        ref="formRef"
        :model="menuForm"
        :rules="menuRules"
        :label-width="80"
        label-placement="left"
        require-mark-placement="left"
        :disabled="disabled"
      >
        <n-grid x-gap="12" :cols="2">
          <template v-for="(item,index) in getFormOptions" :key="index">
            <n-gi>
              <n-form-item :label="item.label" :path="item.key">
                <n-tree-select v-if="item.type === 'tree-select'" v-model:value="menuForm[item.key]" v-bind="item.props" />
                <n-radio-group v-if="item.type === 'radio'" v-model:value="menuForm[item.key]" :name="item.key">
                  <n-space>
                    <n-radio v-for="(cItem,cIndex) in item.options" :key="`${item.key}_${cIndex}`" :value="cItem.value"> {{ cItem.label }}</n-radio>
                  </n-space>
                </n-radio-group>
                <n-input v-if="item.type === 'input'" v-model:value="menuForm[item.key]" v-bind="item.props" />
                <n-select v-if="item.type === 'select'" v-model:value="menuForm[item.key]" v-bind="item.props" />
                <n-input-number v-if="item.type === 'number'" v-model:value="menuForm[item.key]" v-bind="item.props" />
              </n-form-item>
            </n-gi>
          </template>
        </n-grid>
      </n-form>
    </template>
  </Modal>
</template>

<script>
import { form, setMenuOptions, changeMenuType } from '../tools/form.js'
import Modal from '@/components/Modal/index.vue'
import { mpMenuCreate, mpMenuUpdate, permissionCreate, permissionUpdate } from '@/api/system/menu.js'
import { defineComponent, ref, reactive, computed, toRefs, watch } from 'vue'

export default defineComponent({
  name: 'UserModal',
  components: { Modal },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'create'
    },
    data: {
      type: Object,
      default: () => {}
    },
    source: {
      type: Array,
      default: () => []
    }
  },
  emits: {
    'update:visible': null,
    'reload': null
  },
  setup(props, { emit }) {
    const MODAL_TYPE = {
      'create': '新建菜单',
      'preview': '菜单详情',
      'update': '编辑菜单'
    }
    const { menuForm, menuRules } = form
    const formRef = ref()
    setMenuOptions(props.source)
    const data = reactive({
      menuForm: {
        ...menuForm,
        ...props.data,
        pid: props.data?.pid === 0 ? null : props.data?.pid
      },
      menuRules: {
        ...menuRules
      },
      disabled: props.type === 'preview'
    })
    changeMenuType(data.menuForm.type)
    watch(() => data.menuForm.type, (value) => {
      changeMenuType(value)
    })

    const getModalOptions = computed(() => {
      return {
        title: MODAL_TYPE[props.type],
        width: 800,
        show: props.visible,
        negativeText: '取消',
        positiveText: '确认'
      }
    })

    const getFormOptions = computed(() => {
      return {
        ...form.formItem
      }
    })

    function handleConfirm() {
      formRef.value.validate((errors) => {
        if (!errors) {
          const params = { ...data.menuForm }
          if (params.id) {
            if (params.type === 0) {
              mpMenuUpdate(params).then(res => {
                if (res.code === 0) {
                  emit('reload')
                  handleClose()
                }
              }).catch(e => {
                console.log(e)
              })
            } else {
              permissionUpdate(params).then(res => {
                if (res.code === 0) {
                  emit('reload')
                  handleClose()
                }
              }).catch(e => {
                console.log(e)
              })
            }
          } else {
            if (params.type === 0) {
              params.parentId = params.parentId || 0
              mpMenuCreate(params).then(res => {
                if (res.code === 0) {
                  emit('reload')
                  handleClose()
                }
              })
            } else {
              params.menuId = params.parentId || 0
              permissionCreate(params).then(res => {
                if (res.code === 0) {
                  emit('reload')
                  handleClose()
                }
              })
            }
          }
        }
      })
    }

    /* 关闭弹窗 */
    const handleClose = () => {
      emit('update:visible', false)
    }

    return {
      ...toRefs(data),
      formRef,
      getModalOptions,
      getFormOptions,
      handleConfirm,
      handleClose
    }
  }
})
</script>

<style scoped lang='scss'>
.n-input-number{
  width: 100%;
}
</style>
